<template>
	<el-main>
	

		<el-card shadow="never">
			<el-select @change='companyChange(id)' v-model="company_id" placeholder="请选择">
				<el-option v-for="item in company" :key="item.id" :label="item.company_name" :value="item.id"></el-option>
			</el-select>
			<el-select v-model="company_sign_id" placeholder="请选择">
				<el-option v-for="item in sign" :key="item.id" :label="item.company_sign" :value="item.id"></el-option>
			</el-select>
			<el-form ref="ruleForm" :model="form" :rules="rules" >
				
				<el-form-item prop="list">
					<sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据">
						
						
						<el-table-column prop="type" label="类型" width="100">
							<template #default="scope">
								<el-select v-model="scope.row.type" placeholder="请选择">
									<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="goods_number" label="货号" min-width="60">
							<template #default="scope">
								<el-input v-model="scope.row.goods_number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="goods_desc" label="产品名" min-width="80">
							<template #default="scope">
								<el-input v-model="scope.row.goods_desc" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="color" label="颜色" min-width="60">
							<template #default="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="size" label="尺码" min-width="40">
							<template #default="scope">
								<el-input v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="stock_sum" label="箱数" min-width="40">
							<template #default="scope">
								<el-input type="number" @change="countChange(scope.row)" v-model="scope.row.box" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="stock_sum" label="件/箱" min-width="40">
							<template #default="scope">
								<el-input type="number" @change="countChange(scope.row)" v-model="scope.row.piece" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="stock_sum" label="数量" min-width="40">
							<template #default="scope">
								<el-input type="number" @change="priceChange(scope.row)" v-model="scope.row.stock_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="unit_price" label="单价" min-width="40">
							<template #default="scope">
								<el-input type="number" @change="priceChange(scope.row)" v-model="scope.row.unit_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="小计" min-width="60">
							<template #default="scope">
								<el-input type="number" v-model="scope.row.price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						
					</sc-form-table>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">保存</el-button>
				    <el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		
	</el-main>
</template>

<script>
	export default {
		name: 'formtable',
		data(){
			return {
				addTemplate: {
					goods_number: '',
					goods_desc: '',
					type: '3',
					box: 0,
					piece: 0,
					stock_num: 0,
					price: 0,
					unit_price: 0,
					remake: '',
					open: false
				},
				company: {},
				company_id: '',
				company_sign_id: '',
				sign:{},
				all_sign: {},
				form: {
					list: [
						{
							goods_number: '',
							goods_desc: '',
							type: '3',
							box: 0,
							piece: 0,
							stock_num: 0,
							price: 0,
							unit_price: 0,
							remake: '',
							open: false
						},
					]
				},
				typeDic: [
					{
						label: "支出",
						value: "3"
					},
					{
						label: "收入",
						value: "4"
					}
				],
				rules: {
					
				}
			}
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				var company_info = await this.$API.company.info.get()
				this.company = company_info.companies
				this.all_sign = company_info.signes
			},
			priceChange(row) {
				row.price = row.unit_price * row.stock_num
			},
			countChange(row) {
				if (row.box == 0) {
					return;
				}
				row.stock_num = row.box * row.piece 
			},
			//配置当前公司有的sign
			setSign() {
				this.sign = []  // 初始化
				for(var item in this.all_sign) {
					if (this.all_sign[item].company_id == this.company_id) {
						this.sign.push(this.all_sign[item])
					}
				}

				// 默认填写第一个
				this.company_sign_id = ""
				this.company_sign_id = this.sign[0].id
			},	

			companyChange(company_id) {
				this.setSign(company_id)
			},
			submitForm(){
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						alert('请看控制台输出');
						console.log(this.form);
					}else{
						return false;
					}
				})
			},
			resetForm(){
				this.$refs.ruleForm.resetFields();
			},
			pushRow(){
				const data = {
					time: '18:00',
					type: '1',
					val: '0',
					open: true,
					checked: true
				}
				this.$refs.table.pushRow(data)
			},
			deleteRow(){
				this.$refs.table.deleteRow(0)
			}
		}
	}
</script>
